<template>
    <div class="bookwrap">
          <van-form class="vansForm" @submit="onSubmit">
            <van-cell-group title="录入人员与客户">
                <van-field
                v-model="username"
                name="姓名"
                label="姓名"
                placeholder="姓名"
                :rules="[{ required: true, message: '请填写姓名' }]"
                />
                <van-field
                v-model="section"
                name="部门"
                label="部门"
                placeholder="部门"
                :rules="[{ required: true, message: '请填写部门' }]"
                />
                <van-field
                    v-model="department"
                    name="科室"
                    label="科室"
                    placeholder="科室"
                    :rules="[{ required: true, message: '请填写科室' }]"
                />
                 <van-field
                    v-model="telphone"
                    name="电话"
                    label="电话"
                    placeholder="电话"
                    :rules="[{ required:true, pattern: phonePattern, message: '请填写正确的手机号' }]"
                />
                <van-field
                    v-model="customer"
                    name="客户"
                    label="客户"
                    placeholder="客户"
                    :rules="[{ required: true, message: '填写客户名' }]"
                />
            </van-cell-group>
               <van-cell-group title="广告位信息">
                <van-field
                v-model="space_name"
                name="广告位名称"
                label="名称"
                placeholder="广告位名称"
                :rules="[{ required: true, message: '请填写广告位名称' }]"
                />
                <van-field
                    v-model="ad_channel"
                    name="广告渠道"
                    label="渠道"
                    placeholder="广告渠道"
                    :rules="[{ required: true, message: '请填写广告渠道' }]"
                />
                <van-field
                    v-model="ad_type"
                    name="广告类型"
                    label="类型"
                    placeholder="广告类型"
                    :rules="[{ required: true, message: '请填写广告类型' }]"
                />
                <van-field 
                    v-model="ad_duration"
                    name="广告时长"
                    label="时长"
                    placeholder="广告时长"
                    :rules="[{ required: true, message: '请填写广告时长' }]"
                />
                <van-field
                    v-model="start_date_result"
                    is-link
                    readonly
                    name="start_date_result"
                    label="开始时间"
                    placeholder="发布开始时间"
                    @click="showStartCalendar = true"
                    />
                <van-calendar v-model:show="showStartCalendar" @confirm="onStartConfirm" :show-confirm="false" />
                 <van-field
                    v-model="end_date_result"
                    is-link
                    readonly
                    name="end_date_result"
                    label="结束时间"
                    placeholder="发布结束时间"
                    @click="showEndCalendar = true"
                    />
                <van-calendar v-model:show="showEndCalendar" @confirm="onEndConfirm" :show-confirm="false" />
                <van-field 
                    v-model="release_cycle"
                    name="发布周期"
                    label="发布周期"
                    placeholder="发布周期"
                    :rules="[{ required: true, message: '填写广告发布周期' }]"
                />
                <van-field 
                    v-model="release_area"
                    name="发布区域"
                    label="发布区域"
                    placeholder="发布区域"
                    :rules="[{ required: true, message: '填写广告发布区域' }]"
                />
                <van-field 
                    v-model="contract_process"
                    name="合同流程"
                    label="合同流程"
                    placeholder="合同流程"
                    :rules="[{ required: true, message: '填写合同流程' }]"
                />    
                <van-field 
                    v-model="airflow"
                    name="播出流程"
                    label="播出流程"
                    placeholder="播出流程"
                    :rules="[{ required: true, message: '填写播出流程' }]"
                />      
                <van-field 
                    v-model="extra_note"
                    name="备注"
                    label="备注"
                    placeholder="备注"
                    :rules="[{ required: false, message: '填写备注' }]"
                />                
            </van-cell-group>
            <div style="margin: 24px;margin-bottom: 75px;">
                <van-button round block type="warning" native-type="submit">
                提交录入
                </van-button>
                <br>
            </div>
        </van-form>
    </div>
</template>

<script>
    import { ref, getCurrentInstance, computed, onMounted } from 'vue'
    import { useStore } from 'vuex'

    export default {
        setup () {
            const { getters, dispatch } = useStore()
            const username = ref('');
            const password = ref('');
            const department = ref('')
            const section = ref('')
            const telphone = ref('')
            const phonePattern = /^1(3|4|5|6|7|8|9)\d{9}$/
            const customer = ref('')
            const space_name = ref('')
            const ad_channel = ref('')
            const ad_type = ref('')
            const ad_duration = ref('')
            const start_date_result = ref(''); // 日历开始
            const end_date_result = ref(''); //日历结束
            const showStartCalendar = ref(false); // 时间戳数据
            const showEndCalendar = ref(false)   // 时间戳数据
            const startCalendarTime = ref('')
            const endCalendarTime = ref('')
            const release_cycle = ref('')
            const release_area = ref('')
            const contract_process = ref('')
            const airflow = ref('')
            const extra_note = ref('')
            const onStartConfirm = (date) => {
                start_date_result.value = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
                showStartCalendar.value = false;
                startCalendarTime.value = date.getTime() // 时间戳数据
                if(end_date_result.value !== ''){
                    console.log('sss0000000000', endCalendarTime.value)      
                    release_cycle.value = (endCalendarTime.value - date.getTime()) / (1000 * 60 * 60 * 24)+'天'
                    
                }
            };
            const onEndConfirm = (date) => {
                end_date_result.value = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
                showEndCalendar.value = false;
                endCalendarTime.value = date.getTime() // 时间戳数据
                console.log('LLLLLL', date.getTime(), start_date_result.value=='')
                if(start_date_result.value !== ''){
                    console.log('0000000000', startCalendarTime.value)      
                    release_cycle.value = (date.getTime() - startCalendarTime.value) / (1000 * 60 * 60 * 24) + '天'     
                }
            };
            const onSubmit = (values) => {
                console.log('Submit', values, typeof(values));
                const db = $mapp.database();  
                let status = { record: true, startTime: startCalendarTime.value, endTime: endCalendarTime.value } // 加入一个确定属性，有这个属性的作为有效数据
                values = Object.assign(values, status)
                let dbdata =  db.collection("adroom").add(values).then(
                     (res)=>{  console.log("数据库x成功", res); }
                )  
            };
            onMounted(async()=>{
                console.log('vuex booking test')
                let res = await dispatch('User/setMainRoute', '/booking')
            })
            const currentInstance = getCurrentInstance()
            const { $mapp } = currentInstance.appContext.config.globalProperties
            return {
                username,
                password,
                onSubmit,
                department,
                section,
                telphone,
                phonePattern,
                customer,
                space_name,
                ad_channel,
                ad_type,
                ad_duration,
                start_date_result,
                end_date_result,
                onStartConfirm,
                onEndConfirm,
                showStartCalendar,
                showEndCalendar,
                release_cycle,
                release_area,
                contract_process,
                airflow,
                extra_note
            }
        },
    }
</script>
<style scoped>
.bookwrap{
    text-align: left;
    width: 100%;
    margin-top: -1rem;
    font-size: 20rpx;
}
.vansForm{
    /* margin-left: -0.933333rem !important; */
    width: 100%;
    font-size: 0.3rem ;
}
.van-field__value{
    background-color: antiquewhite !important;
}
</style>